<template>
	<view style="height: 100%;">
		<view class="orderForm_content" style="padding-top: 1rpx;padding-bottom: 20rpx;">
			<view class="orderForm_content_item" v-for="(res,index) in list" :key="index">
				<view class="title flex flex-ai-c flex-jc-sb">
					<text>供应商：奥莱供应链</text>
					<text style="color: #F95533;">{{res.status | filterAuth}}</text>
				</view>
				<view class="font-26" style="color: #333333;line-height: 60rpx;">
					<view class="flex flex-ai-c">
						<view>设备名称：</view>
						<view>{{res.purchase_unit}}</view>
					</view>
					<view class="flex flex-ai-c">
						<view>订单号：</view>
						<view>{{res.order_no}}</view>
					</view>
					<view class="flex flex-ai-c">
						<view>采购金额： </view>
						<view>{{res.total_amount}}</view>
					</view>
					<view class="flex flex-ai-c">
						<view>商品数量：</view>
						<view>{{res.total_num}}件</view>
					</view>
					<view class="flex flex-ai-c">
						<view>下单时间：</view>
						<view>{{res.createtime}}</view>
					</view>
				</view>

				<view class="font-26 flex flex-jc-fe" style="color: #666666;margin-top: 20rpx;">
					<!-- 待付款 -->
					<view class="flex f1 flex-ai-c flex-jc-sb" v-if="res.status == 0">
						<block v-if="res.timestamp">
							<view style="width: 300rpx;">
								<u-count-down :time="res.timestamp" format="mm分ss秒自动关闭"></u-count-down>
							</view>
						</block>
						<block v-else>
							<view style="width: 300rpx;">
								已关闭
							</view>
						</block>
						<view class="btn" @click="cancelOrder(res.order_no)">
							取消订单
						</view>
						<view class="btn" style="color: #F95533;border: 1rpx solid #F95533;" @click="goPay(res)">
							去支付
						</view>
					</view>
					<!-- 已付款 -->
					<view class="btn" v-if="res.status == 1">
						待审核
					</view>
					<!-- 已发货 v-if="res.status == 4"  -->
					<view class="flex flex-ai-c" v-if="res.status == 4">
						<view class="btn" style="margin-right: 50rpx;" @click="viewDetails(res)">
							物流信息
						</view>
						<view class="btn" @click="receiving(res)">
							确认收货
						</view>
					</view>
					<!-- 已完成 -->
					<view class="btn" v-if="res.status == 5">
						已完成
					</view>
				</view>
			</view>
			<u-loadmore v-if="list.length" marginTop="20" :status="loadStatus" @loadmore="scrolltolower"
				margin-top="50" />
		</view>
		<view class="flex flex-jc-c flex-ai-c" v-if="!list.length" style="height: 100%">
			<u-empty text="数据为空" mode="list"></u-empty>
		</view>

		<u-popup round="20" overlayOpacity="0.1" bgColor="#F2F2F2" :show="show" @close="show = false" mode="bottom"
			closeable>
			<view>
				<view
					style="text-align: center;padding: 40rpx 0;background: #F2F2F2;border-radius: 56rpx 56rpx 0rpx 0rpx;">
					详细信息</view>
				<view style="border-radius: 30rpx 30rpx 0rpx 0rpx;background: #fff;">
					<view style="color: #111111;padding: 30rpx 40rpx;border-bottom: 1px solid rgb(242,242,242);"
						class="font-28">{{itemDetails.logistics_name||'暂无'}} {{itemDetails.logistics_no || '暂无'}}</view>
					<view style="max-height: 60vh;overflow-y: auto;">
						<u-steps current="0" direction="column" dot inactiveColor="rgb(201,201,201)"
							activeColor="rgb(201,201,201)">
							<u-steps-item v-for="(item,i) in itemDetails.traces" :key="i"
								:title="`${filterAction(item.Action)} ${item.AcceptTime}`"
								:desc="`[${item.Location}]${item.AcceptStation}`" />
						</u-steps>
					</view>

					<view class="flex flex-ai-c font-26"
						style="padding: 20rpx 20rpx 20rpx 0rpx;border: 1rpx solid rgb(242,242,242)">
						<view
							style="padding: 8rpx;color: #F95533;background: rgb(254,241,237);border-radius: 50%;margin: 0 15rpx;">
							收</view>
						<view>
							{{itemDetails.info.name||''}},{{itemDetails.info.phone.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")}},{{itemDetails.info.full_text || ''}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import product from '@/api/product.js';
	export default {
		name: 'orderList',
		props: {
			list: {
				type: Array,
				default: () => []
			},
			loadStatus: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				timeData: {},
				show: false,
				itemDetails: {
					traces: [],
					info: {
						phone: ''
					}
				},
			}
		},
		onLoad() {
			console.log(this.list, 123)
		},
		filters: {
			filterAuth(v) {
				let text = ''
				switch (Number(v)) {
					case 0:
						text = '待支付'
						break
					case 1:
						text = '待审核'
						break
					case 2:
						text = '已拒绝'
						break
					case 3:
						text = '配货中'
						break
					case 4:
						text = '待收货'
						break
					case 5:
						text = '已完成'
						break
					case 6:
						text = '已取消'
						break
					default:
						text = '暂无'
				}
				return text
			}
		},
		methods: {
			filterAction(v) {
				let text = ''
				switch (Number(v)) {
					case 202:
						text = '派送中'
						break
					case 412:
						text = '待取件'
						break
					case 302:
						text = '已签收'
						break
					default:
						text = ''
				}
				return text
			},
			goPay(e) {
				uni.navigateTo({
					url: `/pages/equipment/replenishment/confirm?order_no=${e.order_no}`
				})
			},
			async cancelOrder(order_no) {
				const res = await product.cancelOrder(order_no)
				if (res.code === 200) {
					uni.showToast({
						title: '取消成功',
						icon: 'none'
					})
					setTimeout(() => {
						this.$emit('cancelOrder')
					}, 1000)
				}
			},
			async checkShipping(order_no, info) {
				info = info ? info : {phone:''}
				const res = await product.checkShipping(order_no)
				if (res.code === 200) {
					// res.data.traces.reverse()
					this.itemDetails = {
						...res.data,
						info
					}
				}
			},
			async receiving(item) {
				const res = await product.receiving({
					order_no: item.order_no
				})
				if (res.code === 200) {
					uni.showToast({
						title: '确认成功',
						icon: 'none'
					})
					setTimeout(() => {
						this.$emit('cancelOrder')
					}, 1000)
				}
			},
			viewDetails(res) {
				this.show = true
				this.checkShipping(res.order_no, res.address_info)
			},
			scrolltolower() {
				this.$emit('scrolltolower')
			},
			skip(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-steps {
		padding: 0 20rpx;
	}

	.title {
		padding: 0 25rpx;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #D8D8D8;
		margin-bottom: 24rpx;
	}

	.btn {
		width: 154rpx;
		border-radius: 30rpx;
		border: 1rpx solid #666666;
		text-align: center;
		padding: 14rpx 0;
	}

	.orderForm_content {
		&_item {
			background-color: #fff;
			margin-top: 20rpx;
			box-sizing: border-box;
			padding: 30rpx 24rpx;
			position: relative;
		}
	}
</style>